<template>
  <l-content :app="app">
    <el-form size="mini">
      <el-form-item>
        <el-input placeholder="部门名称" v-model="filterText">
        </el-input>
      </el-form-item>
    </el-form>
    <el-tree
      :data="deptData"
      :props="defaultProps"
      default-expand-all
      :filter-node-method="filterNode"
      ref="tree">
      <div slot-scope="{node, store, data}" style="line-height: 32px">
        <span>
          <span>{{node.label}}</span>
        </span>
        <template v-if="node.level === 1">
          <span>
            <el-button size="small" type="text" @click="showAddDept($event, store, data, 'add')">新增</el-button>
          </span>
        </template>
        <template v-else>
          <span>
            <el-button size="small" type="text" @click="showAddDept($event, store, data, 'add')">新增</el-button>
            <el-button size="small" type="text" @click="showAddDept($event, store, data, 'edit')">修改</el-button>
            <el-button size="small" type="text" @click="delDept($event, store, data)">删除</el-button>
          </span>
        </template>
      </div>
    </el-tree>
    <component :is="dialog" :data="dialogData" @ok="queryDeptTree" @close="close"/>
  </l-content>
</template>

<script>
import SDialogAdd from './comps/DeptManager/SDialogAdd'

export default {
  props: {
    app: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  components: {
    SDialogAdd
  },
  data () {
    return {
      deptData: [],
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      filterText: '',
      dialog: '',
      dialogData: {
        parentId: '',
        isDisabled: true,
        deptId: '',
        showId: '',
        deptName: '',
        title: ''
      }
    }
  },
  created () {
    this.$service.options.clearOptions('Department')
  },
  mounted () {
    this.queryDeptTree()
  },
  watch: {
    filterText (val) {
      this.$refs.tree.filter(val)
    }
  },
  methods: {
    stopPropagation (e) {
      e = window.event || e
      if (document.all) { // 只有ie识别
        e.cancelBubble = true
      } else {
        e.stopPropagation()
      }
    },
    showAddDept (e, store, data, type) {
      this.stopPropagation(e)
      this.dialogData.parentId = data.parentId
      this.dialogData.deptId = data.id
      if (type === 'edit') {
        this.dialogData.isDisabled = false
        this.dialogData.showId = this.dialogData.parentId
        this.dialogData.deptName = data.title
        this.dialogData.title = '编辑部门'
      } else {
        this.dialogData.showId = this.dialogData.deptId
        this.dialogData.deptName = ''
        this.dialogData.title = '新增部门'
      }
      this.dialog = 'SDialogAdd'
    },
    delDept (e, store, data) {
      this.stopPropagation(e)
      this.$confirm('确定删除此部门及其子部门？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showCancelButton: false,
        type: 'warning'
      }).then(() => {
        this.$service.system.delDept(data.id).then(() => {
          this.queryDeptTree()
        })
      }).catch(() => {
      })
    },
    filterNode (value, data) {
      if (!value) return true
      return data.title.indexOf(value) !== -1
    },
    queryDeptTree () {
      this.$service.system.queryDeptTree({deptName: this.filterText}).then(response => {
        this.deptData = response.data
      })
    },
    close () {
      this.dialog = ''
      this.dialogData.isDisabled = true
    }
  }
}
</script>

<style>

</style>
